<template>
  <div>
    <h1>门禁记录(ES)</h1>

<!--    查询-->
    <el-form :inline="true" :model="gateCordVo" class="demo-form-inline">
      <el-form-item label="小区名">
        <el-input v-model="gateCordVo.plotName" placeholder="请输入小区"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findEsGateRecord()">查询</el-button>
      </el-form-item>
    </el-form>

<!--  列表-->
    <el-table :data="tableData" style="width: 100%">

      <el-table-column
        label="编号"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="刷卡人"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.brushPeople }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="刷卡时间"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.brushTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="卡号"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cardNumber }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="设备"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="房屋名称"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.houseName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="所属小区"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.plotName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="身份证号"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="照片"
        width="180">
        <template slot-scope="scope">
          <img :src="i" v-for="i in scope.row.photo.split(',')" width="100px" height="70px">
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

<!--    <el-pagination-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="gateCordVo.pageNum"-->
<!--      :page-sizes="[3, 9, 14, 18]"-->
<!--      :page-size="gateCordVo.pageSize"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total"></el-pagination>-->

  </div>
</template>


<script>

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,


import {findEsGateRecord} from "@/api/monitor/gateban";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      tableData:[],
      gateCord:{},
      gateCordVo:{
        pageNum:1,
        pageSize:10,
      },
      total:0,
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    findEsGateRecord,
    // handleSizeChange(val) {
    //   this.gateCordVo.pageSize=val;
    //   this.findEsGateRecord();
    // },
    // handleCurrentChange(val) {
    //   this.gateCordVo.pageSize=val;
    //   this.findEsGateRecord();
    // },
    gateRecordList(){
      findEsGateRecord(this.gateCordVo).then(
        res=>{
          this.tableData=res;
          // this.total=res.total;
        }
      )
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.gateRecordList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
